<template>
  <div>
    <van-nav-bar title="常用电站" left-arrow left-text="用户"  @click-left="onClickLeft"/>
    <van-tabs v-model="activeTab">
      <van-tab title="常用电站" v-if="isHasCommonStation">
        <div class="block">
          <div class="station">
            <div class="left">
              <img src="../assets/car.svg" alt="" v-if="commonStation.equipType === 2">
              <img src="../assets/eletrc.svg" alt="" v-else>
            </div>
            <ul class="info">
              <li><label>电站名称：</label>{{commonStation.equipName}}</li>
              <li><label>电站编号：</label>{{commonStation.equipNo}}</li>
            </ul>
          </div>
          <div class="b-title mt15">选择插座号</div>
          <van-grid class="grid-box" clickable :column-num="5">
            <van-grid-item
              v-for="i in commonStation.channelNum"
              :key="i"
              :class="{active: i === activeCode, disabled: commonStation.chargingChannels.indexOf(i) > -1}"
              :text="i + ''"
              @click="selectCode(i)"
            >
              <i class="icon icon-chazuo1 chazuo"></i>
              <div class="chazuohao">插座{{i}}</div>
            </van-grid-item>
          </van-grid>
          <div class="mt15">
            <van-button type="primary" size="large" @click="goCommonCharge">选择充电</van-button>
          </div>
        </div>
      </van-tab>
      <van-tab title="远程充电">
        <van-cell-group class="mt15" inset>
          <van-field required v-model="chargingInfo.equipNo" label="电站编号" placeholder="请输入电站编号" />
          <van-field required v-model="chargingInfo.channelNo" label="插座号" placeholder="请输入插座号" />
        </van-cell-group>
        <div class="block">
          <van-button type="primary" size="large" @click="goCharge(chargingInfo)">选择充电</van-button>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  name: 'CommonlyStation',
  data () {
    return {
      activeTab: 0,
      numbers: 20,
      activeCode: null,
      isHasCommonStation: true,
      commonStation: {
        equipId: '',
        equipNo: '',
        equipName: '',
        equipType: 1,
        channelNum: 0,
        chargingChannels: []
      },
      chargingInfo: {
        equipNo: null,
        channelNo: null,
        time: '充满自停'
      }
    }
  },
  computed: {
    user () {
      return this.$store.state.user
    }
  },
  methods: {
    onClickLeft () {
      this.$router.push('/')
    },
    initStationInfo () {
      if (sessionStorage.getItem('equipNo')) {
        this.$http.get('/system/equip/getUsedChannels?equipNo=' + sessionStorage.getItem('equipNo')).then((res) => {
          if (res.code === 200) {
            this.commonStation = res.data
            this.showChannelsFlag = true
          }
        })
        sessionStorage.removeItem('equipNo')
      } else {
        this.$http.get('/system/equip/getCommonUsed').then((res) => {
          if (res.code === 200) {
            this.commonStation = res.data
          }
        })
      }
    },
    selectCode (code) {
      if (this.commonStation.chargingChannels.indexOf(code) > -1) {
        this.$toast('该充电口正在充电中！')
      } else {
        this.activeCode = code
      }
    },
    goCommonCharge () {
      const data = {
        equipNo: this.commonStation.equipNo,
        channelNo: this.activeCode
      }
      this.goCharge(data)
    },
    goCharge (chargingInfo) {
      const data = {
        equipNo: chargingInfo.equipNo,
        channelNo: chargingInfo.channelNo,
        time: chargingInfo.time
      }
      if (!data.equipNo || !data.channelNo) {
        this.$notify({ type: 'danger', message: '请输入正确的电站编号和插座号！' })
        return
      }
      // this.$router.push(`/charging?equipId=${this.chargingInfo.equipId}&channelNo=${this.chargingInfo.channelNo}`)
      this.$router.push({ path: '/gocharge', query: { equipNo: chargingInfo.equipNo, channelNo: chargingInfo.channelNo } })
    },
    showFailAlert () {
      this.$dialog.confirm({
        title: '请求失败',
        message: '没有常用电站，请扫码充电或远程充电！',
        confirmButtonText: '开始扫码',
        cancelButtonText: '关闭',
        closeOnPopstate: false
      }).then(() => {
        this.$store.dispatch('getScan')
        this.isHasCommonStation = false
      }).catch(() => {
        this.activeTab = 1
        this.isHasCommonStation = false
      })
    }
  },
  created () {
    if (!this.user.commonUsed && !sessionStorage.getItem('equipNo')) {
      this.showFailAlert()
    } else {
      this.initStationInfo()
    }
  }
}
</script>

<style scoped lang='less'>
.station {
  display: flex; align-items: center;
  padding: 10px;
  background: #fff;
  .left {
    flex-shrink: 0;
    padding-right: 15px;
    width: 80px; height: 80px;
    display: flex; justify-content: center; align-items: center;
    img {
      max-width: 100%;
      max-height: 100%;
    }
  }
  .info {
    padding-left: 20px;
    li {
      display: flex;
      padding: 3px 0;
      line-height: 18px; font-size: 13px;
      label {
        flex-shrink: 0;
        color: #999;
      }
    }
  }
}
.chazuo {
  font-size: 28px;
}
.chazuohao {
  padding-top: 5px;
}
.b-title {
  padding-top: 2px;
  background: #fff; line-height: 36px;
  text-align: center;
  color: #666;
  border-bottom: solid 1px #f0f0f0;
}
::v-deep {
  .van-grid-item {
    .van-grid-item__content {
      color: #090;
      span {
        font-size: 14px;
      }
    }
    &.active {
      .van-grid-item__content {
        background-color: #09f;
        color: #fff;
        span {
          color: #fff;
        }
      }
    }
    &.disabled {
      .van-grid-item__content {
        color: #f00;
      }
    }
  }
}

</style>
